const query = {
  advposdesc: '', // 广告位描述
  advposname: '', // 广告位名称
  page: '1',  //页码
  limit: '10' // 每页数量
}


// todo ================== 封装渲染数据==================
async function getList() {
  // localStorage.setItem("token", res.data.token)
  const { data: { data } } = await axios.get('/ydd_advpos/list', { params: query })
  // console.log(data)

  document.querySelector('#list').innerHTML = data.data.map((item) => {
    const { id, advposname, advposdesc, advposnum, advpossize, default_data } = item
    return `
        <tr>
            <td>${id}</td>
            <td>${advposname}</td>
            <td>${advposdesc}</td>
            <td>${advposnum}</td>
            <td>${advpossize}</td>
            <td class="caozuo">
              <button type="button" class="layui-btn layui-btn-xs btn_edit"
                style="width: 30px; border-radius: 50%;  padding: 0 8px; background-color: #1e9fff;" data-id="${id}">
                <i class="layui-icon layui-icon-edit   btn_edit" data-id="${id}"></i>
              </button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete"
                style="width: 30px; border-radius: 50%; padding: 0 8px;"  data-id="${id}">
                <i class="layui-icon layui-icon-delete btn_delete" data-id="${id}"></i>
              </button>
            </td>
          </tr>
        `
  }).join('')

  renderPage(data)
}
getList()

// todo 分页功能
const laypage = layui.laypage


function renderPage(data) {
  // 完整显示
  laypage.render({
    elem: 'page-box', // 元素 id
    count: data.count, // 数据总数
    curr: data.currentPage, //当前第几页（会决定第几个按钮高亮）
    limit: data.pageSize,//每页显示的条数
    limits: [10, 20, 40, 50, 100],//下拉框每一项的结果
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 功能布局
    theme: '#409eff',
    jump: function (obj, first) {
      // console.log(obj.curr, obj.limit)

      query.page = String(obj.curr)
      query.limit = String(obj.limit)
      // console.log('first的值', first)

      if (!first) {
        getList()
      }
    }
  })
}



// todo  ==================搜索功能==================
document.querySelector('#search').addEventListener('click', function () {
  const searchVal = document.querySelector('.searchAdvpos').value
  // console.log(searchVal)
  query.advposname = searchVal
  // console.log(query);
  getList()
})

// todo ==================重置功能==================
document.querySelector('#refresh').addEventListener('click', function () {
  query.page = 1,
    query.limit = 10,
    query.advposname = '',
    layer.msg('重置成功')
  document.querySelector('.searchAdvpos').value = ''
  getList()
})

// todo  ==================添加广告位弹出框==================
const addFormStr = `
        <form id="addForm" class="layui-form"  lay-filter="filter">
            <!-- 第一行 广告位名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label" style="font-size: 14px;font-weight: 700;"><i style="color: red;text-align: center;">*</i> 广告位名称</label>
          <div class="layui-input-block">
            <input type="text" name="advposname" required lay-verify="required" placeholder="请输入广告位名称" autocomplete="off"
              style="width: 400px;height: 30px;">
          </div>
        </div>
        <!-- 第二行 广告位描述  -->
        <div class="layui-form-item">
          <label class="layui-form-label" style="font-size: 14px;font-weight: 700;"><i style="color: red;text-align: center;">*</i> 广告位描述</label>
          <div class="layui-input-block">           
              <textarea name="advposdesc" placeholder="请输入广告位描述" style="width: 400px;height: 50px;" ></textarea>
          </div>
        </div>
        <!-- 第三行 广告位尺寸  -->
        <div class="layui-form-item">
          <label class="layui-form-label" style="font-size: 14px;font-weight: 700;"><i style="color: red;text-align: center;">*</i> 广告位尺寸</label>
          <div class="layui-input-block">
            <input type="text" name="advpossize" required lay-verify="required" placeholder="请输入广告位尺寸" autocomplete="off"
             style="width: 400px;height: 30px;">
          </div>
        </div>
        <!-- 第四行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary closeBtn">取消</button>
            <button class="layui-btn addData" lay-submit lay-filter="formDemo" >确定</button>
          </div>
        </div>
        </form>
`




let indexAddForm // 此处index 表示弹出层的索引 

const layer = layui.layer
const form = layui.form

// todo ================== 注册点击事件显示添加框==================
document.querySelector('#addBtn').addEventListener('click', function (e) {
  e.preventDefault()
  indexAddForm = layer.open({
    content: addFormStr, // 内容
    type: 1, //页面层
    title: '添加广告位', // 标题
    area: ['800px', '400px'], // 宽高
    // btnAlign: 'r'
  })
})

// todo  ==================注册点击事件给表单==================
// const advposdescObj = document.querySelector('[name=description]')
// const advpossizeObj = document.querySelector('[name=alias]')
// const advposnameObj = document.querySelector('[name=name]')


document.body.addEventListener('click', async function (e) {
  e.preventDefault()


  if (e.target.classList.contains('addData')) {
    // console.log(111)
    let data = form.val('filter')
    // console.log(data)

    const res1 = await axios.post('/ydd_advpos/add', data)
    // console.log(res1)
    if (res1.status !== 200) {
      return layer.msg('添加失败')
    }
    // 新增成功后 关闭弹出层 因为此弹出层（layer.open） 有索引 所以得配合上面进行删除
    layer.close(indexAddForm)

    // 渲染数据
    getList()

    // 添加成功后弹出提示
    layer.msg('添加成功')
  } else if (e.target.classList.contains('closeBtn')) {
    layer.close(indexAddForm)
  }
})


// todo  ==================删除功能==================

document.querySelector('#list').addEventListener('click', async function (e) {

  if (e.target.classList.contains('btn_delete')) {
    // console.log(111)
    const id = e.target.dataset.id
    // console.log(id)
    const { data } = await axios.get(`/ydd_advpos/del?id=${id}`)
    // console.log(data)
    if (data.errno !== 0) return layer.msg(data.errmsg, { icon: 6 })

    getList()
    layer.msg('删除成功', { icon: 6 })


    if (document.querySelector('.btn_delete').length === 1) {
      if (query.page === 1) {
        query.page = 1
      } else {
        query.page = query.page - 1
      }
    }
  }
})

// todo ================== 修改广告位弹出框==================
const editFormStr = `
        <form id="editForm" class="layui-form"  lay-filter="filter">
         <!-- id 隐藏框 -->        
         <div class="layui-form-item layui-hide">
          <label class="layui-form-label" style="font-size: 14px;font-weight: 700;"><i style="color: red;text-align: center;">*</i> 广告位编号</label>
          <div class="layui-input-block">
           <input type="text" name="id" required lay-verify="required"  style="width: 400px;height:30px;">
          </div>
        </div>
            <!-- 第一行 广告位名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label" style="font-size: 14px;font-weight: 700;"><i style="color: red;text-align: center;">*</i> 广告位名称</label>
          <div class="layui-input-block">
            <input type="text" name="advposname" required lay-verify="required" placeholder="请输入广告位名称" autocomplete="off"
              style="width: 400px;height: 30px;">
          </div>
        </div>
        <!-- 第二行 广告位描述  -->
        <div class="layui-form-item">
          <label class="layui-form-label" style="font-size: 14px;font-weight: 700;"><i style="color: red;text-align: center;">*</i> 广告位描述</label>
          <div class="layui-input-block">           
              <textarea name="advposdesc" placeholder="请输入广告位描述" style="width: 400px;height: 50px;" ></textarea>
          </div>
        </div>
        <!-- 第三行 广告位尺寸  -->
        <div class="layui-form-item">
          <label class="layui-form-label" style="font-size: 14px;font-weight: 700;"><i style="color: red;text-align: center;">*</i> 广告位尺寸</label>
          <div class="layui-input-block">
            <input type="text" name="advpossize" required lay-verify="required" placeholder="请输入广告位尺寸" autocomplete="off"
             style="width: 400px;height: 30px;">
          </div>
        </div>
        <!-- 第四行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary closeeditBtn">取消</button>
            <button class="layui-btn editData" lay-submit lay-filter="formDemo" >确定</button>
          </div>
        </div>
        </form>
`
let indexEditForm

// todo  ==================编辑功能===================

// todo ================= 注册点击事件显示修改框==================
document.querySelector('#list').addEventListener('click', async function (e) {

  if (e.target.classList.contains('btn_edit')) {
    indexEditForm = layer.open({
      content: editFormStr, // 内容
      type: 1, //页面层
      title: '修改广告位', // 标题
      area: ['800px', '400px'], // 宽高
      // btnAlign: 'r'
    })

    // todo  ==================注册点击事件给表单==================
    const id = e.target.dataset.id
    console.log(id)

    const { data } = await axios.get('/ydd_advpos/rowInfo', { params: { id } })
    // console.log(data)
    form.val('filter', data.data)
  }
})

// todo  ==================确认修改==================
document.body.addEventListener('click', async function (e) {

  if (e.target.classList.contains('editData')) {
    // console.log(111)
    e.preventDefault()

    let data = form.val('filter')

    console.log(data)

    const res1 = await axios.post('/ydd_advpos/update', data)
    console.log(res1)

    if (res1.data.errno !== 0) {
      return layer.msg('修改失败')
    }
    // 新增成功后 关闭弹出层 因为此弹出层（layer.open） 有索引 所以得配合上面进行删除
    layer.close(indexEditForm)

    // 渲染数据
    getList()

    // 添加成功后弹出提示
    layer.msg('修改成功')
  } else if (e.target.classList.contains('closeeditBtn')) {
    layer.close(indexEditForm)
  }
})



// todo  ==================右侧按钮区==================
document.querySelector('.shuaxin').addEventListener('click', function () {

  query.advposdesc = '', // 广告位描述
    query.advposname = '', // 广告位名称

    // console.log(11)
    getList()
})


// 设置开关
let flag = true

document.querySelector('.guanbi').addEventListener('click', function () {
  // console.log(111)
  if (flag) {
    document.querySelector('.one_1').style.display = 'block'
    document.querySelector('.one_2').style.display = 'none'
    document.querySelector('.sousuoLan').style.display = 'none'
    flag = !flag
  } else {
    document.querySelector('.one_1').style.display = 'none'
    document.querySelector('.one_2').style.display = 'block'
    document.querySelector('.sousuoLan').style.display = 'block'
    flag = !flag
  }
})





